import React from 'react';
import moment from 'moment';
import {Icon, Flex} from 'weaver-mobile';

const formatDate = (d, df) => new moment(d, 'YYYY-MM-DD HH:mm:ss').format(df);

const previewImage = (current, list) => {
  if(window.em == null)
    return;
  if(!window.em.checkJsApi('previewImage')) 
    return;

  window.em.previewImage({
      current,
      urls: list
  });
}

export default {
  template: [{
    key: 'col1',
    render: (data) => {
      return (
          <div className='item'>
              <div className='date'>
                <div>
                  <div className='yyyyMMdd'>{formatDate(data.date, 'YYYY-MM-DD')}</div>
                  <div className='hhMMss'>{formatDate(data.date, 'HH:mm:ss')}</div>
                </div>
              </div>
              <div className='whitespace'>
                <div><div className='dot' /></div>
              </div>
              <div className='content'>
                <div>
                  <div className='remark'>
                    <div className='val' dangerouslySetInnerHTML={{__html: data.remark}}></div>
                  </div>
                  <div className='imgList'>
                    <Flex wrap="wrap">
                      {
                        data.imgList.map((img, index) => {
                          return (
                            <img key={`img-${index}`} src={img} onClick={() => previewImage(img, data.imgList)}/>
                          )
                        })
                      }
                    </Flex>
                  </div>
                  {
                    data.crm && data.crm.length > 0 &&
                    <div className='position'>
                      <div><Icon type='customer' size='xs' color='#888' /></div>
                      <div className='location'>
                        {
                          data.crm.map((d, i) => (
                            <div key={i} >{d}</div>
                          ))
                        }
                      </div>
                    </div>
                  }
                  <div className='position'>
                    <div><Icon type='location' size='xs' color='#888' /></div>
                    <div className='location '><div className=''>{data.position.address}</div></div>
                  </div>
                  
                </div>
              </div>
          </div>
      );
    },
  }]
};